<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>业主机构首页</span>
        <div class="extra">
          <!-- <el-button type="primary" @click="add">新增文档视频</el-button> -->
        </div>
      </div>
    </template>
    <el-form :inline="true" :model="documentVideo" class="demo-form-inline" style="margin-left: 10px;">

      <el-form-item label="文档视频类型：">
        <el-select v-model="documentVideo.type" placeholder="请选择...">
          <el-option v-for="item in documentVideoTypeList" :key="item.value" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="文档视频名称：">
        <el-input v-model="documentVideo.name" placeholder="请输入..." style="width: 300px;"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="show">查询</el-button>
        <el-button @click="clear">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="container" style="display: flex; flex-wrap: wrap; overflow-y: auto;">
      <el-col style="margin: 20px;margin-top: 2px;" :span="5" v-for="(plan, index) in tableData" :key="index"
        :offset="index % 2 > 0 ? 0 : 0">
        <el-card :body-style="{ padding: '0px' }" @click.native="updateInfo(plan.id)">
          <img src="https://trainfileqiyekaifa.oss-cn-beijing.aliyuncs.com/%E6%9C%BA%E6%9E%84%E9%A6%96%E9%A1%B5.png"
            class="image" style="width: 100%;">
          <div style="padding-left: 14px;padding-top: 14px;padding-bottom: 10px;">
            <el-row>
              <strong style="font-size: 18px;color: #333333;">{{ plan.name }}</strong>
            </el-row>
            <el-row style="padding-top: 7.5px;">
              <span>文档视频名称：{{ plan.name }}</span>
            </el-row>
            <el-row style="padding-top: 7.5px;">
              <span>文档视频类型：{{ getTypeName(plan.type) }}</span>
            </el-row>
            <el-row style="padding-top: 2px;">
              <span>状态：{{ plan.status }}</span>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </div>


    <el-dialog title="文档视频在线预览" :visible.sync="updateVisible" :before-close="clearForm" width="60%">
      <el-form v-model="updateData" class="video-container">
        <el-form-item label="">
          <!--            <a target='_blank' v-if="!getDocumentOrViewType()" :href='getUrl()'>
              预览文档文件
            </a>-->
          <iframe :src="getUrl()" :style="{ width: 900 + 'px', height: 1000 + 'px' }"
            v-if="!getDocumentOrViewType()"></iframe>

          <video width="100%" controls v-if="getDocumentOrViewType()">
            <source :src="getUrl()" type="video/mp4">
            您的浏览器不支持视频标签。
          </video>
        </el-form-item>

      </el-form>

    </el-dialog>

    <!-- <el-table max-height="400" highlight-current-row ref="multipleTable" tooltip-effect="dark" border :data="tableData"
      style="margin: 0 auto; width: 100%;">
      <el-table-column prop="id" label="编号" header-align="center" align="center"></el-table-column>
      <el-table-column prop="name" label="文档视频类型名" header-align="center" align="center"></el-table-column>
      <el-table-column prop="type" label="文档视频类型名" header-align="center" align="center">
        <template slot-scope="scope">
          {{ getTypeName(scope.row.type) }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" header-align="center" align="center"></el-table-column>
      <el-table-column label="操作" width="400" header-align="center" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" plain @click="updateInfo(scope.row.id)">查看
          </el-button>
        </template>
      </el-table-column>
    </el-table> -->


  </el-card>
</template>


<script>
import {
  addDocumentVideo,
  changeDocumentVideo,
  deleteDocumentVideo,
  getAllDocumentVideo
} from "@/api/documentVideo";
import { getDocumentVideoTypeList } from "@/api/documentVideoType";
import { getInfo } from "@/api/user";

export default {
  data() {
    return {
      background: true,
      // 每页显示的条数
      pageSize: 1000,
      // 总记录数
      totalCount: 100,
      // 当前页码
      currentPage: 1,
      // 添加数据对话框是否展示的标记
      dialogVisible: false,
      // 表格数据
      tableData: [],
      documentVideo: {},
      form: {},
      posts: [],
      multipleSelection: [],
      selectedIds: [],
      documentVideoTypeList: [],
      formLabelWidth: "140px",


      //文件上传
      fileList: [],
      addOrUpdateFileList: [],//所有文件上传后的地址
      attachmentInfoShow: false,
      type: '',
      //更新
      updateVisible: false,
      updateData: {},


      myInfo: {},//操作人信息
    }
  },
  methods: {
    show() {
      getAllDocumentVideo(this.documentVideo, this.currentPage, this.pageSize).then((res) => {
        if (res.data.code === 1) {
          this.totalCount = res.data.data.total;
          this.tableData = res.data.data.rows;
          //console.log(this.tableData)
          if (this.tableData.length === 0 && this.currentPage > 1) {
            this.currentPage -= 1;
            this.show();
          }
        }
      }).catch((e) => {
      })
    },
    getDocumentVideoTypeLists() {
      getDocumentVideoTypeList().then((res) => {
        if (res.data.code === 1) {
          this.documentVideoTypeList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch((e) => {
      })
    },
    getTypeName(type) {
      const types = this.documentVideoTypeList.find(t => t.id === type);
      return types ? types.name : '未找到对应的类型';
    },
    getDocumentOrViewType() {
      console.log(this.getTypeName(this.updateData.type))
      return this.getTypeName(this.updateData.type).endsWith("视频");
    },
    getUrl() {
      console.log(this.updateData.url);

      return this.updateData.url;
    },
    clear() {
      this.documentVideo = {};
      this.show();
    },
    add() {
      this.documentVideo = {};
      this.addOrUpdateFileList = [];
      this.type = ''
      this.dialogVisible = true;
    },
    addForm() {

      for (let i = 0; i < this.addOrUpdateFileList.length; i++) {
        this.addOrUpdateFileList[i].type = this.type;

        addDocumentVideo(this.addOrUpdateFileList).then(res => {
          if (res.data.code === 1) {
            this.$message.success("保存成功")
            this.dialogVisible = false;
            this.addOrUpdateFileList = [];
            this.fileList = [];
            this.show();
          } else {
            this.$message.error(res.data.msg)
          }
        }).catch(e => {
        });
      }
    },
    updateForm() {
      changeDocumentVideo(this.updateData).then(res => {
        //console.log(res)
        if (res.data.code === 1) {
          this.$message.success("更新成功")
          this.updateVisible = false;
          this.show()
        } else {
          this.$message.error(res.data.msg)
          this.updateVisible = false;
        }
      }).catch(e => {
      });
    },
    clearForm() {
      this.updateData = {};
      this.updateVisible = false;
    },

    close() {
      this.dialogVisible = false;
      this.type = "";
      this.addOrUpdateFileList = [];
      this.fileList = [];
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    updateInfo(id) {
      console.log(id);

      this.updateData = this.tableData.filter(data => data.id === id)[0];
      if (this.updateData.url.endsWith('.mp4') || this.updateData.url.endsWith('.mov') || this.updateData.url.endsWith('.avi')) {
        this.updateVisible = true;
      }
      else if (this.updateData.url.endsWith('.pdf')) {

        this.updateData.url = 'http://localhost:8081/pdfjs-4.9.155-dist/web/viewer.html?file=' + this.updateData.url;
        this.updateVisible = true;
      }
      else {
        window.open(this.updateData.url, '_blank');
      }
    },
    deleteById(id) {
      this.$refs.multipleTable.clearSelection();
      this.$refs.multipleTable.toggleRowSelection(this.tableData.filter(data => data.id === id)[0]);
      this.deleteByIds()
    },
    deleteByIds() {
      // 弹出确认提示框
      this.$confirm("此操作将删除数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        //用户点击确认按钮
        //1. 创建id数组, 从 this.multipleSelection 获取即可
        for (let i = 0; i < this.multipleSelection.length; i++) {
          this.selectedIds[i] = this.multipleSelection[i].id;
        }
        //console.log(this.selectedIds);
        deleteDocumentVideo(this.selectedIds).then((resp) => {
          if (resp.data.code === 1) {
            //删除成功
            this.$message.success("删除成功");
            this.clear();
          } else {
            this.$message.error(resp.data.msg);
            this.show();
          }
        }).catch(() => {
        });

      }).catch(() => {
        //用户点击取消按钮
        this.$message.info("取消删除");
      });

    },

    //分页
    handleSizeChange(val) {
      // 重新设置每页显示的条数
      this.pageSize = val;
      this.show();
    },
    handleCurrentChange(val) {
      // 重新设置当前页码
      this.currentPage = val;
      this.show();
    },


    //文件上传
    //删除
    handleRemove(file, fileList) {
      this.addOrUpdateFileList = [];
      for (let i = 0; i < fileList.length; i++) {
        this.addOrUpdateFileList.push(fileList[i].response.data);
      }
    },
    handlePreview(file) {
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //上传成功
    fileUpload(response, file, fileList) {
      //console.log(response)
      if (response.code === 1) {
        this.addOrUpdateFileList.push(response.data);
      }
    },


    getMyInfo() {
      getInfo().then((res) => {
        if (res.data.code === 1) {
          this.myInfo = res.data.data;
          this.show();
        }
      }).catch((e) => {
      })
    },


  },
  mounted() {
    this.show();
    this.getDocumentVideoTypeLists();
    this.getMyInfo();
  },
};
</script>


<style>
.video-container {
  display: flex;
  justify-content: center;
  /* 水平居中对齐子元素 */
  align-items: center;
  /* 垂直居中对齐子元素 */
}

* {
  margin: 0;
  padding: 0;
}

.el-header {
  background-color: rgb(238, 241, 246);
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: white;
}
</style>
<script setup>
</script>
